<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            pad: 6px;
            text-decoration: none;
        }
        
        button {
            width: 80px;
            height: 40px;
            background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%);
            border: none;
            border-radius: 5px;
            position: relative;
            border-bottom: 4px solid #2b8bc6;
            color: #fbfbfb;
            font-weight: 600;
            font-family: 'Open Sans', sans-serif;
            text-shadow: 1px 1px 1px rgb(0 0 0 / 40%);
            font-size: 15px;
            text-align: center;
            text-indent: 5px;
            box-shadow: 0px 3px 0px 0px rgb(0 0 0 / 20%);
            cursor: pointer;
            display: block;
            /* margin: 0 300px;
            margin-bottom: 20px; */
        }
        
        textarea {
            margin: 0;
            padding: 0;
            border: 1px solid skyblue;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: #fff;
            font-size: 14px;
            color: red;
            margin: 15px 0;
        }
        
        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="message" id="" cols="50" rows="10" ci></textarea>
    <button>确定</button>
    <ul>

    </ul>
    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');

        // 2.绑定事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('你还没有输入内容');
                return false;
            } else {
                // (1)创建元素
                var li = document.createElement('li');
                // 获取text文本 赋值给li
                console.log(text.value);
                li.innerHTML = text.value + "<a href='javascript:;'><button>删除</button></a>";

                // (2)添加元素
                // ul.appendChild(li);

                // (2)添加元素 向前追加
                ul.insertBefore(li, ul.children[0]);
                text.value = '';

                // 删除元素 删除的是当前链接的li  a的父级
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // node.removeChild(child) 删除的是li 当前a的父级-->li this.parentNode
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

</html>